<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <div>
        <table>
            <input type="text" placeholder="查找"><input type="button" value="查找" onclick="query()">
            <input type="button" value="增加" onclick="add()">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>摘要</th>
                <th>内容</th>
                <th>分类</th>
                <th>作者</th>
                <th>发表时间</th>
                <th>操作</th>
            </tr>
          <script src="./js/jquery-3.6.0.min.js"></script> 
          <script src="./js/baseUrls.js"></script> 

        </table>

        <script>
            $(function () {
                $.ajax({
                    url: `${baseUrls}/blogs`,
                    type: "get",
                    success: function (data) {
                        data.data.forEach(function (item) {
                            var tb = $('.tb');
                            let html = ` <tr id ="id01">
                         <td>
                            ${item.id}
                            </td>
                            <td>
                            ${item.title}
                            </td>
                            <td>
                            ${item.abstract}
                            </td>
                            <td>
                            ${item.content}
                            </td>
                            <td>
                            ${item.classify}
                            </td>
                            <td>
                            ${item.autor}
                            </td>
                            <td><input type="button" value= "修改" onclick=" detail( ${item.id})" >
                            <input type="button" value= "删除" onclick=" del( ${item.id})" ></td>
                        </tr>`
                            tb.append(html)
                        })
    
                    }
                })
    
            })
            function add() {
                location.href = "./add.html"
            }
            function del(id) {
                $.ajax({
                    url: `http://localhost:3000/blogs/${id}`,
                    type: 'DELETE',
                    success: function (res) {
                        location.href = "./index.html"
                    }
                })
            }
            function detail(id) {
                location.href = "./addOredit.html?id" + id
            }
    
            function query() {
                let id = $("#query").val()
                if (id.length > 0) {
                    $.get("http://localhost:3000/blogs/" + id, function (res) {
                        var tr = $("[id=id01]")
                        tr.remove()
                        var tb = $('.tb');
                        let html = `      <tr id="id01">
                         <td>
                            ${res[0].id}
                            </td>
                            <td>
                            ${res[0].title}
                            </td>
                            <td>
                            ${res[0].abstract}
                            </td>
                            <td>
                            ${res[0].content}
                            </td>
                            <td>
                            ${item.classify}
                            </td>
                            <td>
                            ${item.autor}
                            </td>
                            <td><input type="button" value= "修改" onclick=" detail( ${res[0].id})" >
                            <input type="button" value= "删除" onclick=" del( ${res[0].id})" ></td>
                        </tr>
                    `
                        tb.append(html)
                    })
                } else {
                    location.href = "./index.html"
                }
            }
        </script>


</body>
</html>